<!-- 充值 -->
<template>
  <div class="charge">
      <div class="mycoins">{{coin}}</div>
      <div class="pay-info">
          <div class="title">请选择充值金额</div>
          <div class="pay-list">
            <div class="pay-item flex" v-for="(item, index) in coinsList" :key="index" @click="setPaySelected(item, index)" :class="{selected: selected === index}">
              <div class="count"><b>{{item.coin}}</b>金币<span style="color:#09bb07;font-size:0.24rem;font-weight:400;margin-left:0.1rem;" v-if="+item.coin_award>0">(赠送{{item.coin_award}}金币)</span></div>
              <div class="fee">&yen; {{item.money}}</div>
            </div>
          </div>
          <div class="pay">
              <mt-button type="primary" size="large" @click.native="startPay">微信支付</mt-button>
          </div>
      </div>
      <foot :selected="2"></foot>
  </div>
</template>

<script>
import foot from "./tabfoot2";
import store from "store";
import Wx from '@/assets/js/weixin';
import api from "@/assets/js/api";
import {Toast} from 'mint-ui';
import {updateAccount} from '@/assets/js/utils';//更新用户信息
export default {
  data() {
    return {
      coin: 0,
      coinsList: [],
      selected: 0,
      selectedPay: {},
      isPay: false
    };
  },

  components: {
    foot
  },

  computed: {},

  mounted() {
    this.getMyCoin();
    this.getlistCoin();
  },

  methods: {
    getMyCoin() {
      updateAccount((res) => {
        this.coin = res.coin;
      })
    },
    getlistCoin() {
      api.fetch("/api/coins").then(res => {
        this.coinsList = res.data;
        this.selectedPay = this.coinsList[0];
      });
    },
    setPaySelected(item, index) {
      this.selected = index;
      this.selectedPay = item;
    },
    startPay() {
      if (this.isPay) return;
      this.isPay = true;
      this.createOrderSn();
    },
    createOrderSn() {
      let url = "/api/payments";
      api
        .fetch(url, {
          method: "POST",
          data: {
            coin_id: this.selectedPay.id
          }
        })
        .then(res => {
          this.getPayConfig(res.data.id);
        }).catch((err)=>{
          let msg = err.response.data.message;
          Toast(msg);
          this.isPay = false;
        });
    },
    getPayConfig(id) {
      api.fetch("/api/payments/" + id + "/prepay-params").then(res => {
        let data = res.data;
        data.success = () => {
          this.getMyCoin();
          this.isPay = false;
        };
        data.cancel = () => {
          this.isPay = false;
        };
        data.fail = () => {
          this.isPay = false;
        };
        Wx.pay(data);
      }).catch((err)=>{
        Toast({
          message: err.response.data.message,
          iconClass: 'mint-toast-icon mintui mintui-field-warning'
        })
        this.isPay = false;
      });
    }
  }
};
</script>
<style>
.charge .mint-button--large {
  height: 100%;
}
.charge .mint-button--primary {
  color: #fefefe;
  background-color: #09bb07;
  border-radius: 0.1rem;
}
</style>
<style lang='less' scoped>
.charge {
  min-height: 100%;
  padding: 0 0.3rem 1.28rem;
  background-color: #7373ff;
  overflow: hidden;
}
.mycoins {
  padding: 0.4rem 0 0.8rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: bold;
  color: #ffda64;
}
.pay-info {
  border-radius: 0.2rem;
  overflow: hidden;
  background-color: #fff;
  padding: 0 0.3rem;
  .title {
    height: 1.2rem;
    text-align: center;
    font-size: 0.32rem;
    line-height: 1.2rem;
  }
}
.pay-list {
  max-height: 5.3rem;
  overflow: scroll;
}
.pay-item {
  height: 1rem;
  box-sizing: border-box;
  border: 0.04rem solid #fff;
  border-radius: 0.1rem;
  margin-bottom: 0.2rem;
  justify-content: space-between;
  padding: 0 0.3rem;
  .count {
    display: flex;
    align-items: center;
    color: #ffb52b;
    padding-left: 0.7rem;
    height: 100%;
    background: url("../assets/images/coin-icon.png") no-repeat left center;
    background-size: 0.5rem;
    font-weight: bold;
    b {
      font-size: 0.4rem;
    }
  }
  .fee {
      font-size: 0.32rem;
      font-weight: 500;
    }
  &.selected {
    border: 0.04rem solid #ffda64;
  }
}
.pay {
  padding: 0.4rem 0 0.6rem;
  height: 1rem;
  box-sizing: content-box;
}
</style>
